<template>
	<view>
		<!-- 轮播图演示 -->
		<lun-bo :imgArr="imgArr"></lun-bo>
		<!-- 导航栏nav -->
		<tabbar></tabbar>
		<!-- 推荐商品 -->
		<goods-list :hotGoods="hotGoods" @goodHandle="goodsDetail">
			<view class="title" slot="top">推荐商品</view>
		</goods-list>
	</view>
</template>

<script>
	import LunBo from '@/components/LunBo.vue'
	import GoodsList from '@/components/GoodsList.vue'
	import Tabbar from './childComponents/Tabbar.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				// 轮播图
				imgArr: [],
				// 热门商品
				hotGoods: []
			}
		},
		components: {
			LunBo,
			Tabbar,
			GoodsList
		},
		onLoad() {
			this.getList()
			this.getHotGoods()
		},
		methods: {
			// 获取轮播图数据
			async getList() {
				const res = await this.$http({
					url: '/getlunbo'
				})
				if(res.statusCode !== 200) {
					return uni.showToast({
						title: '获取轮播图数据错误'
					})
				}
				this.imgArr = res.data.message
			},
			// 获取热门商品列表
			async getHotGoods() {
				const res = await this.$http({
					url: '/getgoods?pageindex=1'
				})
				if(res.statusCode !== 200) {
					return uni.showToast({
						title: '获取热门商品列表失败'
					})
				}
				this.hotGoods = res.data.message
			},
			// 跳转到商品详情页
			goodsDetail(id) {
				uni.navigateTo({
					url: '/pages/goods-detail/goods-detail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.hot-goods {
		background-color: #eee;
		.title {
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: $shop-color;
			background-color: white;
			font-weight: 600;
			letter-spacing: 40rpx;
			margin-bottom: 8rpx;
		}
	}
</style>
